<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane :label="title" name="tab-0">
      <div class="edit-handles-con">
        <el-collapse v-model="eventTabs">
          <el-collapse-item title="通用属性" name="cmmmon">
            <el-form class="margin-bottom-10">
              <input-normal label="组件类型" v-model="componentData.type" disabled="disabled"></input-normal>
              <input-normal label="组件id" v-model="getComId.id" @change="onChangeAttrId"></input-normal>
              <switch-normal v-model="commonAttr.isPageFixed" label="全局固定布局" @change="onChangeAttr"></switch-normal>
              <dropdown-normal label="方位类型" :valLists="POSITION_TYPES" v-model="commonAttr.positionType" @change="onChangeAttr"></dropdown-normal>
              <switch-normal v-model="commonAttr.isBottom" label="距离底部" @change="onChangeAttr"></switch-normal>
              <switch-normal v-model="commonAttr.isRight" label="距离右边" @change="onChangeAttr"></switch-normal>
              <input-normal v-if="commonAttr.isRight" label="距离右边距离" v-model="commonAttr.right" @change="onChangeAttr"></input-normal>
              <input-normal label="属性关联id" v-model="commonAttr.relateAttrCompId" @change="onChangeAttr"></input-normal>
              <input-normal v-model="commonAttr.itemIndex" label="索引或键值" placeholder="0-9或uid、mid" @change="onChangeAttr"></input-normal>
              <input-normal label="事件关联id" v-model="commonAttr.relateEventCompId" @change="onChangeAttr"></input-normal>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="组件属性" name="comp">
            <slot></slot>
            <el-form>
              <el-divider content-position="center">通用属性</el-divider>
              <switch-normal v-model="commonAttr.isVisible" label="可见" @change="onChangeAttr"></switch-normal>
              <slider-normal v-model="commonAttr.opacity" label="透明度" :min="0" :max="1" :step="0.1" @change="onChangeAttr"></slider-normal>
              <dropdown-normal v-if="isFontFamily" label="字体" :valLists="FontFamilys" v-model="commonAttr.fontFamily" @change="onChangeAttr"></dropdown-normal>
              <textarea-normal v-if="isCustomFontStyle" label="自定义字体" placeholder="字体名，字体文件url" v-model="commonAttr.customFontStyle" @change="onChangeAttr"></textarea-normal>
              <template v-if="isTextStyle">
                <div class="text-style-group">
                  <el-radio-group v-model="textAlign" @change="onChangeAlign">
                    <el-radio-button v-for="(style, index) in textStyles" :checked="style.checked" :label="style.attr" :key="index"><i :class="style.icon"></i></el-radio-button>
                  </el-radio-group>
                  <el-checkbox-button v-for="(style, index) in textStyles_" v-model="style.checked" :key="index" @change="onChangeAlign(style)"><i :class="style.icon"></i></el-checkbox-button>
                </div>
              </template>
              <template v-if="isBorderStyle">
                <slider-normal v-model="commonAttr.borderRadius" label="圆角" :max="300" :step="1" @change="onChangeAttr"></slider-normal>
                <dropdown-normal v-model="commonAttr.borderStyle" :valLists="BORDER_STYLES" label="边框类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
                <template v-if="commonAttr.borderStyle != BORDER_STYLES[0].value">
                  <slider-normal v-model="commonAttr.borderSize" label="边框大小" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
                  <color-normal v-model="commonAttr.borderColor" label="边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
                </template>
              </template>
              <template v-if="isCustomCssStyle">
                <textarea-normal label="自定义css样式" placeholder="box-shadow:0 0 20px #f00;" v-model="commonAttr.customCssStr" @change="onChangeAttr"></textarea-normal>
              </template>
              <!-- <textarea-normal label="自定义类字符串" v-model="commonAttr.customClassStr" @change="onChangeAttr"></textarea-normal> -->
              <!-- <textarea-normal label="自定义类" v-model="commonAttr.customClasses" @change="onChangeAttr"></textarea-normal> -->
            </el-form>
          </el-collapse-item>
          <right-position></right-position>
        </el-collapse>
      </div>
    </el-tab-pane>
    <el-tab-pane label="动画" name="tab-1">
      <div class="edit-handles-con">
        <right-animate></right-animate>
      </div>
    </el-tab-pane>
    <el-tab-pane label="事件" name="tab-2">
      <div class="edit-handles-con">
        <right-events></right-events>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { useWebControlsStore } from '@/store/web/controls'
import { isHasOwnProperty } from '@/utils/'
import { TEXT_STYLES, TEXT_STYLES_, POSITION_TYPES, BORDER_STYLES, FontFamilys } from '@/const/web/'
import { COMPONENT_TYPES } from '@/const/'

const props = defineProps<{ 
  title: string,
}>()

const useWebComponent = useWebComponentStore()
const useWebControls = useWebControlsStore()
const isDebug = computed(() => {
  //@ts-ignore
  return process.env.NODE_ENV === 'production' ? false : true
})
const eventTabs = ['comp', 'position']
const textAlign = ref('center')
const tabName = 'page'
const tabNames = useWebComponent.tabNames
const textStyles = _.cloneDeep(TEXT_STYLES)
const textStyles_ = _.cloneDeep(TEXT_STYLES_)

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
let getComId_: any
const getComId = computed(() => {
  getComId_ = { id: useWebComponent.currentComponentData!.id }
  return getComId_
})

const isFontFamily = computed(() => {
  return isHasOwnProperty(useWebComponent.currentComponentData!.commonAttr, 'fontFamily')
})
const isCustomFontStyle = computed(() => {
  return isHasOwnProperty(useWebComponent.currentComponentData!.commonAttr, 'customFontStyle')
})
const isTextStyle = computed(() => {
  return isHasOwnProperty(useWebComponent.currentComponentData!.commonAttr, 'textAlign')
})
const isBorderStyle = computed(() => {
  const isHasOwnProperty_ =  isHasOwnProperty(useWebComponent.currentComponentData!.commonAttr, 'borderStyle')
  if(isHasOwnProperty_ && !useWebComponent.currentComponentData!.commonAttr.borderStyle) {
    useWebComponent.currentComponentData!.commonAttr.borderStyle = 'none'
  }
  return isHasOwnProperty_
})
const isCustomCssStyle = computed(() => {
  return isHasOwnProperty(useWebComponent.currentComponentData!.commonAttr, 'customCssStr')
})


const onChangeAlign = (params: any) => {
  const commonAttr = {}
  if(params.icon == "jy-icon-empty" || params.length == 0) {
    textAlign.value = ''
    _.forEach(textStyles, (style: any) => {
      style.checked = false
      commonAttr[style.key] = ''
    })
      _.forEach(textStyles_, (style: any) => {
      style.checked = false
      commonAttr[style.key] = ''
    })
    onChangeAttrAlign(commonAttr)
  } else {
    let str: string = ''
    if(params.attr) {
      str = params.attr
    } else { 
      str = params
    }
    const attrs = str.split(',')
    const attr = attrs[0]
    const value = attrs[1]
    if(params.attr) {
      if(params.checked) {
        commonAttr[attr] = value
      } else {
        commonAttr[attr] = ''
      }
    } else {
      commonAttr[attr] = value
    }
    onChangeAttrAlign(commonAttr)
  }
}
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const onChangeAttrAlign = (commonAttr: any) => {
  useWebComponent.updateCurrentComponentData({ commonAttr })
}
const onChangeAttrId = () => {
  useWebComponent.updateCurrentComponentData({ id: getComId_.id })
  useWebControls.setControlById({ compId: componentData_.id, newCompId: getComId_.id })
}
const onUpdateTab = () => {
  const params: any = {}
  params[tabName] = useWebComponent.tabNames[tabName]
  useWebComponent.updateTab(params)
}
</script>


